<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
        <link rel="stylesheet" href="/common/layui/css/layui.css">
        <link rel="stylesheet" href="/admin/css/style.css">
        <script src="/common/layui/layui.js"></script>
        <script src="/common/jquery-3.3.1.min.js"></script>
        <script src="/common/vue.min.js"></script>
		<link rel="stylesheet" type="text/css" href="/css/shop.css"/>
        <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.js"></script>
	</head>
	<body>
    <div class="main" id="app">
        <div id="fixedData">
            <!--顶栏-->
            <header >
                <h1 v-text="webname"></h1>
                <div class="breadcrumb">
                    <i class="layui-icon">&#xe715;</i>
                    <ul>
                        <li v-for="vo in address">
                            <a v-text="vo.name" :href="vo.url"></a> <span>/</span>
                        </li>
                    </ul>
                </div>
            </header>
            <!--左栏-->
            <div class="left">
                <ul class="cl">
                    <!--顶级分类-->
                    <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                        <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                            <i class="layui-icon" v-html="vo.icon"></i>
                            <span v-text="vo.name"></span>
                            <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active"
                                                                                                  class="layui-icon active">&#xe623;</i>
                        </a>
                        <!--子级分类-->
                        <div v-for="vo2,index2 in vo.list">
                            <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)"
                               v-text="vo2.name"></a>
                            <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--右侧-->
        <div class="right" id="Right">
            <div class="shoppingBar">
                <h2>购物清单</h2>
                <table>
                    <tr>
                        <th>
                            <input type="checkbox" @change="checkedAll($event)">
                            全选
                        </th>
                        <th>商品名称</th>
                        <th>数量</th>
                        <th>单价（元）</th>
                        <th>金额（元）</th>
                        <th>操作</th>
                    </tr>
                    <!--接受商品数据vue-->
                    <tr v-for="(item, index) in goods" class="commodity">
                        <th>
                            <input v-model="item.isSel" type="checkbox" class="input">
                        </th>
                        <th class="content">
                            <img :src="item.img" width="100px" height="100px">
                            <p>{{item.commodityName}}</p>
                        </th>
                        <th>
                            <button type="button" @click="decrease(index)">-</button>
                            <span>{{item.num}}</span>
                            <button type="button" @click="add(index)">+</button>
                        </th>
                        <th>{{item.price}}</th>
                        <th class="money">{{item.price * item.num}}</th>
                        <th>
                            <span id="delete" @click="deleteThis(index)" class="glyphicon glyphicon-remove">删除</span>
                        </th>
                    </tr>

                </table>
<!--                底部操作栏-->
                <div class="shoppingBar-footer">
                    <div class="manage">
                        <span class="delAll" @click="deleteSelected">删除所选商品</span>
                        <span class="return">继续购物</span>
                    </div>

                    <button id="go" type="button" @click="handleMent">去结算</button>

                    <div class="buy">
                        <span>{{countAll}}</span>
                        件商品总计:
                        <span>￥{{totalPrice}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
   </div>
    <script src="/admin/js/config_user.js"></script>
    <script>
        var right=new Vue({
            el:"#Right",
            //导入商品数据
            data:{
                goods:[],
            },

            //定义计算方法
            computed: {
                // 计算商品总数
                countAll: function () {
                    var sum = 0;
                    for (var i in this.goods) {
                        if (this.goods[i].isSel) {
                            sum += Number(this.goods[i].num);
                        }
                    }
                    return sum;
                },

                // 计算所选商品总价
                totalPrice: function () {
                    var sum1 = 0;
                    for (var i in this.goods) {
                        if (this.goods[i].isSel) {
                            sum1 += this.goods[i].num * this.goods[i].price;
                        }
                    }
                    return sum1;
                },
            },

            //定义方法
            methods: {
                //结算商品
                handleMent(){
                    let userInfo = JSON.parse(localStorage.getItem('userInfo'));
                    let newGoods  = JSON.parse( JSON.stringify(this.goods) ); //暂替代深克隆
                    // let orderCommodityList = {
                    //     commodityNum:this.goods.num,
                    //     commodityType:this.goods.classification
                    // }
                    newGoods.forEach(item=>{
                        item.commodityNum = item.num;
                        item.commodityType = item.classification
                    })
                    //
                    console.log(userInfo)
                    $.ajax({
                        url:'/order/insert',
                        type:'post',
                        data:JSON.stringify({
                            userId:userInfo.username ,
                            phone:userInfo.phone,
                            place:userInfo.address,
                            realName:userInfo.realName,
                            price:this.totalPrice*1,
                            orderCommodityList:newGoods
                        }),
                        contentType: "application/json;charset=UTF-8",
                        success: (data)=> {
                            if(data===1){
                                this.getShopCar()
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg('下单成功，等待商家确定');
                                });
                            }else{
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg('下单失败');
                                });
                            }
                        }
                    })
                    console.log(this.goods,'goods')
                },
                getShopCar(){
                    console.log(123123333)
                    let userName = JSON.parse( window.localStorage.getItem('userInfo') )?.username;
                    $.ajax({
                        url:'/shoppingCar/select',
                        type:'post',
                        data:JSON.stringify({
                            userId:userName
                        }),
                        contentType: "application/json;charset=UTF-8",
                        success: (data)=> {
                            data[0]?.commodityList.forEach(item=>item.isSel = true )
                            this.goods = data[0]?.commodityList;
                            console.log(data[0]?.commodityList,'data?.commodityList')
                        }
                    })
                },
                //添加至购物车
                // 点击减号
                decrease: function (index) {
                    if (this.goods[index].num == 1) {
                        alert("修改数量不能小于0");
                        return;
                    } else {
                        this.goods[index].num--;
                    }
                },

                //点击加号
                add: function (index) {
                    if (this.goods[index].num == 20) {
                        alert("购买的商品数量不能超过20件！");
                        return;
                    } else {
                        this.goods[index].num++;
                    }
                },
                // 点击全选
                checkedAll: function (e) {
                    var isCheckedAll = e.target.checked; // e.target.checked 是当前复选框的状态值 true/false
                    if (isCheckedAll) {
                        for (var i in this.goods) {
                            this.goods[i].isSel = true;
                        }
                    } else {
                        for (var i in this.goods) {
                            this.goods[i].isSel = false;
                        }
                    }
                },

                // 点击删除单条商品列表
                deleteThis: function (index) {
                    var falg=confirm("您确定要删除此商品吗？");
                    if (falg) {
                        this.goods.splice(index,1);
                    } else{
                        return false;
                    }
                },

                // 点击删除所选商品列表
                deleteSelected: function () {
                    for (var i = this.goods.length - 1; i >= 0; i--) {
                        if (this.goods[i].isSel) {
                            this.goods.splice(i, 1);
                        }
                    }
                    alert("成功删除所选商品！");
                }
            },
            mounted(){
                this.getShopCar();
            }
        })
    </script>
	</body>
</html>
